<script setup lang="ts">
// push时传对象, params (写name传递) 就通过 this.$route.params获取
// push时传对象, query  (写path)     就通过 this.$route.query 获取
// 动态路由传参  /article/:id        this.$route.params 获取
import {
    reqGetArticleInfo,
    reqSetLike,
    reqDelLike,
    reqDislike,
    reqCancelDislike,
} from "@/api/article";
import { reqSetFocus, reqDelFocus } from "@/api/user";
import { ref } from "vue";
import ArticleComment from "./comment.vue";
import { Article } from "@/types/article";
import { useRoute } from "vue-router";
import { Toast } from "vant";
const route = useRoute();
const loading = ref(true); // 控制加载中的 loading 状态
const articleInfo = ref<Article>({
    art_id: "",
    title: "",
    pubdate: "",
    aut_id: "",
    aut_name: "",
    aut_photo: "",
    is_followed: false,
    attitude: 0,
    content: "",
    is_collected: false,
});
console.log(route.query.id);

const getArticleInfo = async () => {
    const { data } = await reqGetArticleInfo(route.query.id as string);
    articleInfo.value = data.data;
    console.log(articleInfo.value);
    loading.value = false;
};
getArticleInfo();
// 关注
const setFocus = async () => {
    await reqSetFocus(articleInfo.value.aut_id as string);
    articleInfo.value.is_followed = !articleInfo.value.is_followed;
    console.log("set", articleInfo.value.is_followed);
    Toast.success("关注成功");
    // getArticleInfo(); //! 这里的接口没做，点击本地显示就行，重新刷新就没了效果，后端没做
};
// 取消关注
const delFocus = async () => {
    await reqDelFocus(articleInfo.value.aut_id as string);
    articleInfo.value.is_followed = !articleInfo.value.is_followed;
    console.log("del", articleInfo.value.is_followed);
    Toast.success("取消关注");
    // getArticleInfo();
};
// 切换点赞
const toggleLike = async () => {
    if (articleInfo.value.attitude === 1) {
        await reqDelLike(articleInfo.value.art_id.toString());
        articleInfo.value.attitude = -1;
    } else {
        await reqSetLike(articleInfo.value.art_id.toString());
        articleInfo.value.attitude = 1;
    }
    Toast.success("操作成功");
};
// 切换喜欢
const toggleDislike = async () => {
    if (articleInfo.value.attitude === 0) {
        await reqCancelDislike(articleInfo.value.art_id.toString());
        articleInfo.value.attitude = -1;
    } else {
        await reqDislike(articleInfo.value.art_id.toString());
        articleInfo.value.attitude = 0;
    }
    Toast.success("操作成功");
};
</script>
<template>
    <div class="article-container">
        <!-- 导航栏 -->
        <van-nav-bar
            fixed
            left-arrow
            @click-left="$router.back()"
            title="文章详情"
        ></van-nav-bar>
        <!-- /导航栏 -->

        <!-- 加载中 loading -->
        <van-loading v-if="loading" class="article-loading" />
        <!-- /加载中 loading -->

        <!-- 文章详情 -->
        <div class="detail" v-else>
            <h3 class="title">{{ articleInfo.title }}</h3>
            <div class="author">
                <van-image
                    :src="articleInfo.aut_photo"
                    round
                    width="1rem"
                    height="1rem"
                    fit="fill"
                />
                <div class="text">
                    <p class="name">{{ articleInfo.aut_name }}</p>
                    <p class="time">{{ articleInfo.pubdate }}</p>
                </div>
                <van-button
                    round
                    size="small"
                    type="default"
                    v-if="!articleInfo.is_followed"
                    @click.stop="setFocus"
                    >+ 关注</van-button
                >
                <van-button
                    round
                    size="small"
                    type="primary"
                    v-else
                    @click.stop="delFocus"
                    >已关注</van-button
                >
            </div>
            <div class="content" v-html="articleInfo.content"></div>
            <van-divider>END</van-divider>
            <div class="zan">
                <van-button
                    @click="toggleLike"
                    round
                    size="small"
                    hairline
                    type="primary"
                    plain
                    :icon="
                        articleInfo.attitude === 1 ? 'good-job' : 'good-job-o'
                    "
                    >{{
                        articleInfo.attitude === 1 ? "取消点赞" : "点赞"
                    }}</van-button
                >
                &nbsp;&nbsp;&nbsp;&nbsp;
                <van-button
                    @click="toggleDislike"
                    round
                    size="small"
                    hairline
                    type="danger"
                    plain
                    icon="delete"
                >
                    {{ articleInfo.attitude === 0 ? "取消不喜欢" : "不喜欢" }}
                </van-button>
            </div>
            <!-- 文章评论 -->
            <div>
                <ArticleComment
                    :articleId="articleInfo.art_id"
                ></ArticleComment>
            </div>
            <!-- 文章评论 -->
        </div>
        <!-- 文章详情 -->
    </div>
</template>

<style lang="scss" scoped>
.article-container {
    position: absolute;
    left: 0;
    top: 0;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}
.article-loading {
    padding-top: 100px;
    text-align: center;
}
.error {
    padding-top: 100px;
    text-align: center;
}
.detail {
    padding: 50px 10px;
    .title {
        font-size: 16px;
    }
    .zan {
        text-align: center;
    }
    .author {
        padding: 10px 0;
        display: flex;
        .text {
            flex: 1;
            padding-left: 10px;
            line-height: 1.3;
            .name {
                font-size: 14px;
                margin: 0;
            }
            .time {
                margin: 0;
                font-size: 12px;
                color: #999;
            }
        }
    }
    .content {
        font-size: 14px;
        overflow: hidden;
        white-space: pre-wrap;
        word-break: break-all;
        :deep(img) {
            max-width: 100%;
            background: #f9f9f9;
        }
    }
}
</style>
